<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
      }

      #container {
        height: 100%;
        overflow-y: scroll;
      }

      #loading {
        display: none;
        text-align: center;
        padding: 10px;
        font-size: 14px;
      }

      #list {
        padding: 0 5px;
      }

      #list li {
        height: 150px;
        background-color: #eee;
        list-style: none;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <ul id="list"></ul>
      <div id="loading">Loading...</div>
    </div>

    <script>
      // 获取元素
      var container = document.getElementById('container')
      var list = document.getElementById('list')
      var loading = document.getElementById('loading')

      // 生成随机数函数
      function generateRandom(start, end) {
        return Math.floor(Math.random() * (end - start) + start + 1)
      }
      // 生成随机字母函数
      function generateName(count = 4) {
        let str = ''
        for (let i = 0; i < count; i++) {
          str += String.fromCharCode(generateRandom(65, 90))
        }
        return str
      }
      // 生成随机颜色
      function getRandomColor() {
        var letters = '0123456789ABCDEF'
        var color = '#'
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)]
        }
        return color
      }
      // 生成数据函数，可以根据page以及pageSize生成数据
      function generateData(page, pageSize = 10) {
        const result = []
        for (let i = 0; i < pageSize; i++) {
          result.push({
            id: `第${page}页，第${i + 1}条`,
            name: generateName(),
            age: generateRandom(18, 38),
            backgroundColor: getRandomColor(),
          })
        }
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(result)
          }, 2000)
        })
      }
      function renderHtml() {
        let str = ''
        for (let i = 0; i < data.length; i++) {
          const current = data[i]
          str += `<li style="background-color: ${current.backgroundColor}">
                            <p>姓名：${current.name}</p>
                            <p>id：${current.id}</p>
                            <p>年龄：${current.age}</p>
                        </li>`
        }
        list.innerHTML = str
      }

      // 定义变量
      var page = 1 // 当前页码
      var clientHeight = container.clientHeight // 容器可视高度
      var scrollTop = container.scrollTop // 容器滚动高度
      const data = [] // 数据
      var isLoading = true // 是否正在加载
      loading.style.display = 'block' // 显示加载提示
      generateData(page, 10).then((res) => {
        data.push(...res)
        isLoading = false
        loading.style.display = 'none'
        renderHtml()
      })

      // 容器总高度
      var totalHeight = container.scrollHeight
      // 绑定滚动事件
      container.addEventListener('scroll', function () {
        if (totalHeight === clientHeight + scrollTop && isLoading === false) {
          page++
          isLoading = true
          loading.style.display = 'block'
          generateData(page, 10).then((res) => {
            data.push(...res)
            isLoading = false
            loading.style.display = 'none'
            renderHtml()
          })
        }
      })
    </script>
  </body>
</html>
